<template>
	<div class="Register">
		<el-upload class="avatar-uploader" :multipe="false"
		            :show-file-list="true" :auto-upload="false"
		            :before-upload="beforeAvatarUpload" 
		            :file-list="fileList"                            
		            :on-change="handleChange"
		            action = "uploadAction"
		            list-type="picture"
		            accept="image/jpg,image/jpeg">
		            <img v-if="imageUrl" :src="`${$ip}/api/public/showimg/${imageUrl}`" class="avatar">
		            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
		     </el-upload>
			 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
			   <el-form-item label="账号" prop="account">
			     <el-input v-model="ruleForm.account"></el-input>
			   </el-form-item>
			  <el-form-item label="密码" prop="password">
			    <el-input v-model="ruleForm.password"></el-input>
			  </el-form-item>
			  <el-form-item label="确认密码" prop="nextPassword">
			     <el-input v-model="ruleForm.nextPassword"></el-input>
			   </el-form-item>
			   <el-form-item label="姓名昵称" prop="nickname">
			     <el-input v-model="ruleForm.nickname"></el-input>
			   </el-form-item>
			   <el-form-item label="手机号" prop="phone">
			     <el-input v-model="ruleForm.phone"></el-input>
			   </el-form-item>
			   <el-form-item label="vip客户" prop="vip">
			       <el-select v-model="ruleForm.vip" placeholder="请选择身份">
			         <el-option label="普通客户" value="0"></el-option>
			         <el-option label="vip客户" value="1"></el-option>
			       </el-select>
			     </el-form-item>
				  <el-form-item label="地址" prop="addr">
				     <el-input type="textarea" v-model="ruleForm.addr"></el-input>
				   </el-form-item>
			   <el-form-item>
			     <el-button type="primary" @click="submitForm()">立即创建</el-button>
			   </el-form-item>
			 </el-form>
			 
	</div>
</template>

<script>
	export default {
		name:'PcRegister',
		data(){
			 var validatePass = (rule, value, callback) => {
			        if (value === '') {
			          callback(new Error('请输入密码'));
			        } else {
			          if (this.ruleForm.password !== '') {
			            this.$refs.ruleForm.validateField('nextPassword');
			          }
			          callback();
			        }
			      };
			      var validatePass2 = (rule, value, callback) => {
			        if (value === '') {
			          callback(new Error('请再次输入密码'));
			        } else if (value !== this.ruleForm.password) {
			          callback(new Error('两次输入密码不一致!'));
			        } else {
			          callback();
			        }
			      };
			return{
				fileList: [],
				imageUrl:'',
				 ruleForm: {
				          nickname: '',
				          account:'',
						  password:'',
						  nextPassword:'',
						  phone:'',
						  vip:'',
						  role:'usr',
						  addr:'',
				        },
				        rules: {
				          nickname: [
				            { required: true, message: '请输入昵称', trigger: 'blur' },
				            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
				          ],
				          account: [
				            { required: true, message: '请输入账号', trigger: 'blur' },
				          ],
						   password: [
						              { validator: validatePass, trigger: 'blur' }
						        ],
						nextPassword: [
						              { validator: validatePass2, trigger: 'blur' }
						        ],
						  phone: [
						    { required: true, message: '请输入账号', trigger: 'blur' },
						    { min: 11, message: '长度在 11位', trigger: 'blur' }
						  ],
						  vip: [
						     { required: true, message: '请选择身份', trigger: 'change' }
						  ],
						  addr: [
						     { required: true, message: '请填写地址', trigger: 'blur' }
						  ],
				        }
				      }
			},
			 methods: {
				 handleChange: function(file, fileList) {
				      this.fileList = fileList;
				 	 console.log(this.fileList);
				 },
				 beforeAvatarUpload(file) {
				     const isJPG = file.type === 'image/jpeg';
				     const isLt2M = file.size / 1024 / 512;
				 		
				     if (!isJPG) {
				         this.$message.error('上传图片只能是 JPG 格式!');
				     }
				     if (!isLt2M) {
				         this.$message.error('上传图片大小不能超过 0.5MB!');
				     }
				     return isJPG && isLt2M;
				 },
			      submitForm() {
			        console.log(this.ruleForm);
					let formData = new FormData();
					let fs = this.fileList;
					if(fs.length >0 && fs[0].raw != null){
						formData.append("mypic", fs[0].raw);
					} 
					formData.append('nickname',this.ruleForm.nickname);
					formData.append('account',this.ruleForm.account);
					formData.append('password',this.ruleForm.password);
					formData.append('role',this.ruleForm.role);
					formData.append('phone',this.ruleForm.phone);
					formData.append('vip',this.ruleForm.vip);
					formData.append('addr',this.ruleForm.addr);
					this.$postf('/api/public/addUser',formData).then((resp)=>{
						console.log(resp.data);
						if(resp.data.code == 200){
							this.imageUrl = resp.data.data.img;
							this.$message({
							message:resp.data.msg,
							type:'success'
						   })
						}else{
							this.$message({
								message:resp.data.msg,
								type:'error'
							})
						}
						
						this.ruleForm = {};
					})
			      },
			     
			    }
		}

</script>

<style scoped>
	.Register{
		width: 80%;
		margin: 50px auto;
		display: flex;
	}
	.avatar-uploader:hover {
	  border-color: #409EFF;
	}
	.avatar-uploader-icon {
			border: 2px #000000 dotted;
			border-radius: 8px;
	  font-size: 40px;
	  color: #8c939d;
	  width: 400px;
	  height: 400px;
	  line-height: 400px;
	  text-align: center;
	}
	.avatar-uploader  img{
			 width: 400px ;
			 height: 400px ;
	}
	
	.avatar {
	  width: 178px;
	  height: 178px;
	  display: block;
	}
	.demo-ruleForm{
		width: 60%;
	}
</style>